<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" rel="stylesheet" href="/css/user.css"/>
</head>
<body>

    <div id="app">
        <table class="altrowstable" id="alternatecolor">
            <tr>
                <th>用户编号</th>
                <th>用户名</th>
                <th>真实姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>出生日期</th>
                <th>邮箱</th>
                <th>删除操作</th>
            </tr >
                <tr id="userList" v-for="user in userList">
                    <td>{{user.id}}</td>
                    <td>{{user.userName}}</td>
                    <td>{{user.name}}</td>
                    <td>{{user.age}}</td>
                    <td>{{user.sex}}</td>
                    <td>{{user.birthday}}</td>
                    <td>{{user.email}}</td>
                    <td><button @click="delById(user)">删除</button></td>
                </tr>
        </table>


</div>
</body>
<script src="js/vuejs-2.5.16.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script>
    var vue = new Vue({
        el:"#app",
        data: {
            userList:[]
        } ,
        methods:{
            initData:function () {
                var that = this;
                axios.get('/findAll').then(function(res){
                    that.userList = res.data;
                });
            },
            delById:function (user) {
                var _index = this.userList.indexOf(user);
                axios.get('/delById/'+user.id).then(res=>{
                    this.userList.splice(_index,1);
                    })
            }
        },

        created:function () {
            this.initData();
        }
    });
</script>
</html>